﻿<div [@routerTransition]>

    <div class="m-subheader ">
        <div class="d-flex align-items-center">
            <div class="mr-auto col-xs-6">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>管道流程</span>
                </h3>
                <span class="m-section__sub">
                    管道流程的文本头信息
                </span>
            </div>
            <div class="col-xs-6 text-right">
                <!-- <button *ngIf="isGranted('Pages.Administration.Languages.Create')" (click)="createOrEditLanguageModal.show()" class="btn btn-primary blue"><i class="fa fa-plus"></i> {{l("CreateNewLanguage")}}</button> -->


                <button *ngIf="isGranted('Mes58.Pages.Pipleline.Step_BatchIntoStep')" (click)="batchIntoStepModal.show()" class="btn btn-primary blue">
                    <i class="fa fa-plus"></i> 批量绑定工艺规程
                </button>
                <button  *ngIf="isGranted('Mes58.Pages.Pipleline.Step_BatchIntoRePart')" (click)="batchIntoReportModal.show()" class="btn btn-primary blue">
                    <i class="fa fa-plus"></i> 批量反馈信息
                </button>

            </div>
        </div>
    </div>
        <div class="m-content">
            <div class="m-portlet m-portlet--mobile">
                <div class="m-portlet__body m-portlet__body--no-padding">
                    <div class="row m-row--no-padding m-row--col-separator-xl">
                        <div class="col-md-12 col-lg-6 col-xl-4">
                            <div class="m-widget24">
                              <div class="m-widget24__item">
                                <h4 class="m-widget24__title">
                                  我的处理
                                </h4>
                                <br>
                                <span class="m-widget24__desc">
                                  需要我处理的管道
                                </span>
                                <span class="m-widget24__stats">
                                  {{num.mycl}}
                                </span>
                                <div class="m--space-10"></div>
                              </div>
                            </div>
                          </div>
                          <div class="col-md-12 col-lg-6 col-xl-4">
                            <div class="m-widget24">
                              <div class="m-widget24__item">
                                <h4 class="m-widget24__title">
                                  其他处理
                                </h4>
                                <br>
                                <span class="m-widget24__desc">
                                  需要他人处理的管道
                                </span>
                                <span class="m-widget24__stats">
                                  {{num.othercl}}
                                </span>
                                <div class="m--space-10"></div>
                              </div>
                            </div>
                          </div>
                          <div class="col-md-12 col-lg-6 col-xl-4">
                            <div class="m-widget24">
                              <div class="m-widget24__item">
                                <h4 class="m-widget24__title">
                                  已完成的
                                </h4>
                                <br>
                                <span class="m-widget24__desc">
                                  已经完成的管道
                                </span>
                                <span class="m-widget24__stats">
                                  {{num.succl}}
                                </span>
                                <div class="m--space-10"></div>
                              </div>
                            </div>
                          </div>
                    </div>


                    <div class="row align-items-center">
                    </div>
                </div>
            </div>

            <div class="m-portlet m-portlet--mobile">
                <div class="m-portlet__head">
                    <div class="m-portlet__head-caption">
                        <div class="m-portlet__head-title">
                            <h3 class="m-portlet__head-text">
                                管道列表
                            </h3>
                        </div>
                    </div>
                    <div class="m-portlet__head-tools">
                        <ul class="nav nav-pills nav-pills--brand m-nav-pills--align-right m-nav-pills--btn-pill m-nav-pills--btn-sm"
                            role="tablist">
                            <li class="nav-item m-tabs__item">
                                <div class="btn-group m-btn-group" role="group" aria-label="...">
                                  <!-- <button type="button" class="btn btn-secondary m-btn--hover-brand">
                                    我的处理
                                  </button>
                                  <button type="button" class="btn btn-secondary m-btn--hover-brand">
                                    其他处理
                                  </button>
                                  <button type="button" class="btn btn-secondary m-btn--hover-brand">
                                    全部
                                  </button> -->
                                  <button
                                  type="button"
                                  class="btn btn-secondary m-btn--hover-brand {{
                                      className1
                                  }}"
                                  (click)="tabTypeClick(1)"
                              >
                              我的处理
                              </button>
                              <button
                                  type="button"
                                  class="btn btn-secondary m-btn--hover-brand {{
                                      className2
                                  }}"
                                  (click)="tabTypeClick(2)"
                              >
                              其他处理
                              </button>
                              <button
                                  type="button"
                                  class="btn btn-secondary m-btn--hover-brand {{
                                      className3
                                  }}"
                                  (click)="tabTypeClick(3)"
                              >
                              完成
                              </button>
                                </div>
                              </li>
                              <!-- <li class="nav-item m-tabs__item">
                                <div class="btn-group m-btn-group" role="group" aria-label="...">
                                  <button type="button" class="btn btn-secondary m-btn--hover-brand">
                                    批量处理
                                  </button>
                                </div>
                              </li> -->

                            <li class="nav-item m-tabs__item" style="width: 300px; margin-left: 40px;">
                                <a href="javascript:;" class="m-portlet__nav-link m-btn--pill">
                                    <div class="m-input-icon m-input-icon--right">
                                        <input type="text" class="form-control m-input m-input--solid"
                                            placeholder="Search..." [(ngModel)]="filterText" name="filterText" (keyup.enter)="getPipes()">
                                        <span class="m-input-icon__icon m-input-icon__icon--right">

                                            <span  >
                                                <i class="la la-search m--font-brand"></i>
                                            </span>

                                        </span>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="m-portlet__body">
                    <div class="row align-items-center" style="margin: 0;">
                        <div class="tab-content" style="width:100%;">
                            <div class="tab-pane active">
                                <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                                    <div class="m-pipeline">
                                        <div class="table-responsive">
                                            <table class="table" id="pipe-table">
                                                <thead>
                                                    <tr>
                                                        <td class="m-pipeline__base">基础信息</td>
                                                        <td class="m-pipeline__status">状态信息</td>
                                                        <td class="m-pipeline__time">完成时间</td>
                                                        <td class="m-pipeline__node">节点信息</td>
                                                        <td class="m-pipeline__action">工艺规程名称</td>
                                                        <td class="m-pipeline__action">操作</td>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr *ngFor="let pipe of primengTableHelper.records">
                                                        <td>
                                                            <div class="row">

                                                                <div class="col-md-6">
                                                                    <span class="m-pipeline__title">
                                                                        {{pipe.barCode}}
                                                                    </span>

                                                                    <span class="m-pipeline__sub">
                                                                        <!-- {{pipe.modelCode}} {{pipe.batchString}} -->
                                                                        投产数量：{{pipe.amountPlanned}}
                                                                    </span>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <span class="m-pipeline__title">
                                                                        {{pipe.drawingCode}}
                                                                    </span>
                                                                    <span class="m-pipeline__sub">
                                                                        {{pipe.taskName}}
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </td>

                                                        <td>
                                                            <span class="m-badge m-badge--success m-badge--wide">
                                                                {{pipe.statusName}}
                                                            </span>
                                                        </td>
                                                        <td>
                                                            <span>
                                                                {{pipe.dueDatePlanned | momentFormat:'YYYY-MM-DD'}}
                                                            </span>
                                                        </td>
                                                        <td>
                                                            <span>
                                                                {{pipe.actCode}} {{pipe.actName}}
                                                            </span>
                                                        </td>
                                                        <td>

                                                            <span *ngIf="pipe.techDocCode==null">
                                                                暂未绑定工艺规程
                                                            </span>
                                                            <span *ngIf="pipe.techDocCode!=null">
                                                                {{pipe.techDocCode}}
                                                            </span>
                                                        </td>
                                                        <td>
                                                            <button type="button"
                                                                class="btn btn-sm m-btn m-btn--gradient-from-danger m-btn--gradient-to-warning"
                                                                (click)="actBase.show(pipe)" *ngIf="isGranted('Mes58.Pages.Pipleline.Step.Process') && type==1">
                                                                处理
                                                            </button>
                                                            <div class="btn-group" dropdown [autoClose]="false"
                                                                container="body" *ngIf="isGranted('Mes58.Pages.Pipleline.Step.Caret') && type!=3">
                                                                <button id="button-nested" dropdownToggle type="button"
                                                                    class="btn btn-sm m-btn--gradient-from-accent m-btn--gradient-to-success dropdown-toggle"
                                                                    aria-controls="dropdown-nested"
                                                                    style="margin-left: 5px;">
                                                                    操作 <span class="caret"></span>
                                                                </button>
                                                                <ul id="dropdown-nested" *dropdownMenu
                                                                    class="dropdown-menu" role="menu"
                                                                    aria-labelledby="button-nested">
                                                                    <li role="menuitem" dropdown triggers="mouseover"
                                                                        placement="top left" container="body"
                                                                        class="dropleft">
                                                                        <a dropdownToggle
                                                                            class="dropdown-item dropdown-toggle"
                                                                            (click)="false">触发异常 </a>
                                                                        <ul *dropdownMenu class="dropdown-menu"
                                                                            role="menu" style="margin-left: -130px;">

                                                                            <a *ngFor="let actAbnormal of pipe.abNodes"
                                                                                class="dropdown-item"
                                                                                href="javascript:;"
                                                                                (click)="actAbnormalModal.show(pipe, actAbnormal)">
                                                                                {{actAbnormal}}
                                                                            </a>
                                                                            <a *ngFor="let actAbnormal of pipe.globalAbNodes"
                                                                                class="dropdown-item"
                                                                                href="javascript:;"
                                                                                (click)="actAbnormalModal.show(pipe, actAbnormal)">
                                                                                {{actAbnormal}}
                                                                            </a>
                                                                        </ul>
                                                                    </li>
                                                                    <li role="menuitem"><a class="dropdown-item"
                                                                            href="javascript:;"
                                                                            (click)="pipelineRun(pipe)"  *ngIf="type==1">运行管道</a></li>
                                                                </ul>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <div class="primeng-paging-container">
                                                <p-paginator [rows]="
                                                primengTableHelper.defaultRecordsCountPerPage
                                            "
                                                    #paginator (onPageChange)="getPipes($event)"
                                                    [totalRecords]="primengTableHelper.totalRecordsCount"
                                                    [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                                </p-paginator>
                                                <span class="total-records-count">
                                                    {{'总计:' + primengTableHelper.totalRecordsCount}} </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <act-base #actBase (modalRun)="getPipes()"></act-base>
        <actAbnormalModal #actAbnormalModal (modalSave)="getPipes()"></actAbnormalModal>
        <batchIntoStepModal #batchIntoStepModal (modalSave)="getPipes()"></batchIntoStepModal>
        <batchIntoReportModal #batchIntoReportModal (modalSave)="getPipes()"> </batchIntoReportModal>
    </div>
